<template>
  <div class="new_address_container">
    <AddresHeader/>
      <!-- 新地址 -->
    <div class="new_address_wrapper">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="text"
          name="电话"
          label="电话"
          placeholder="电话"
          :rules="[{ required: true, message: '请填写电话' }]"
        />
        <!-- 城市选择 -->
        <van-field
          readonly
          clickable
          name="picker"
          :value="city"
          label="选择器"
          placeholder="点击选择城市"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
        <div style="margin: 16px;">
          <van-button round block @click="submit">提交</van-button>
        </div>
      </van-form> 
    </div>
  </div>
</template>

<script>
import AddresHeader from "./AddresHeader";
import mixin from "../../store/store";
export default {
  mixins:[mixin],
  components:{
    AddresHeader
  },
  data(){
    return {
      username:"",
      password:"",
      city: '',
      doors:"",
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      showPicker: false,
    }
  },
  methods:{
    onSubmit(){
      console.log("first")
      console.log("onSubmit")
    },
     onConfirm(value) {
      this.city = value;
      this.showPicker = false;
    },
    submit(){
      this.addCity({name:this.username,tel:this.password,address:this.city});
      this.$router.goNext("/address")
      this.username = "";
      this.password = "";
      this.city = "";
      this.doors = "";
    }
  }
}
</script>

<style scoped>
.new_address_wrapper
{
  margin-top: 64px;
}
</style>